<template>
    <div class="">
        <div class="flex items-center justify-between p-4">
            <div class="flex items-center">
                <div class="text-lg font-bold">每日秒杀</div>
                <div class="flex items-center ml-4 text-xs">
                    <div class="text-gray-500 ">本场剩余</div>
                    <div class="px-2 ml-2 text-white space-x-px bg-orange-300 flex items-center rounded-full">
                        <div>{{ current.hours }} 小时</div>
                        <div>{{ current.minutes }} 分</div>
                        <div>{{ current.seconds }} 秒</div>
                        <div class="w-6">{{ current.milliseconds }}</div>
                    </div>
                </div>

            </div>
            <div>
                <IIcon-park-outline:more class="text-gray-700" />
            </div>
        </div>
        <div>
            <div class="px-4 space-x-4 overflow-x-auto text-sm whitespace-nowrap">
                <RouterLink :to="{
                    name:'goods',
                    params:{
                        id:1
                    }
                }" class="inline-block space-y-1 text-center " v-for="(item, i) in goods">
                    <div class=" bg-slate-50">
                        <img :src="item.src" class="object-cover w-24 mx-auto" />
                    </div>
                    <div class="">
                        <span class="text-lg text-red-600">¥{{ item.price }}</span>
                        <span class="ml-1 text-sm text-gray-400 line-through">¥{{ item.originPrice }}</span>
                    </div>
                    <div class="text-gray-700">{{ i }} {{ item.name }}</div>
                </RouterLink>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import g1 from '~/assets/shop/goods/g1.png'
import g2 from '~/assets/shop/goods/g2.png'
import g3 from '~/assets/shop/goods/g3.png'
import { useCountDown } from '~/utils';

const { current, start } = useCountDown({
    time: 1000 * 60 * 60,
    millisecond: true,
})
start()
const goods = [
    { name: '加拿大进口猫粮', src: g1, price: '398.00', originPrice: '599.00' },
    { name: '新西兰进口', src: g2, price: '398.00', originPrice: '599.00' },
    { name: '素力高全猫粮', src: g3, price: '398.00', originPrice: '599.00' },
    { name: '加拿大进口猫粮', src: g1, price: '398.00', originPrice: '599.00' },
    { name: '新西兰进口', src: g2, price: '398.00', originPrice: '599.00' },
    { name: '素力高全猫粮', src: g3, price: '398.00', originPrice: '599.00' },
]
</script>
    
<style></style>